<template>
	<page  ref='page'>
		<!-- 新房验收 三方监理 wwl	 -->
		<view class="page">
			<image :src="info.cover" mode="scaleToFill" class="cover"></image>
			<!-- info -->
			<view class="info_box">
				<view class="top">
					<text>¥</text>
					<text>{{info.amount_min}}</text>
					<text>起</text>
				</view>
				<view class="bottom">
					<view class="left">
						{{info.name}}
					</view>
					<!-- #ifdef MP-WEIXIN  -->
					<button class="right" :data-id='info.id' open-type="share">
						<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/3rA1cq50vTXQVEXInDZDEceL38m8YOYoNrvnvs0w.png" mode=""></image>
						<text class="text1">分享</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN   -->
					<view class="right" @click="onShare()">
						<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/3rA1cq50vTXQVEXInDZDEceL38m8YOYoNrvnvs0w.png" mode=""></image>
						<text>分享</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- operation -->
			<view class="tab_box">
				<view class="row" v-for="(row,i) in tabList" :key='i' :class="row.id == tabActive ? 'active':''" @click="onChangeTab(row.id)">
					{{row.name}}
				</view>
			</view>
			<view class="info_content" v-if='tabActive == 1'>
				<view class="parse">
					<u-parse :html="info.info" />
				</view>
				<view class="info_list" v-if='recommend.total > 0'>
					<view class="title">
						<text></text>
						<text>猜你喜欢</text>
						<text></text>
					</view>
					<renovation-row :list='recommend.list' :page='recommend.page' :size='recommend.size' status='shop'  type='caiLike'/>
				</view>
			</view>
			<view class="info_content" v-else-if='tabActive == 3'>
				<view class="info_list" v-if='recommend.total > 0'  style="padding: 0rpx 36rpx 30rpx;margin-top: -30rpx;">
					<renovation-row :list='recommend.list' :page='recommend.page' :size='recommend.size' status='shop' type='caiLike'/>
				</view>
			</view>
			<view class="" v-else>
				<empty :status='2'/>
			</view>
			<!-- v-if='getters.currentArea && getters.currentArea.cityId && info.sku ' -->
			<view class="bottom" v-if="info.sku">
				<purchase-operation :type='type' :info='info' :source='source' :offer='offer' :shopaid='shopaid' :goodssku='goodssku' />
			</view>
			<!-- <view class="button_box" v-else>
				<view class="btn">
					请添加房屋档案
				</view>
			</view> -->
		</view>
	</page>
</template>

<script>
	import { getNewHouse , getSupervisor} from "./static/api.js"
	import { getGuessYouLike } from "../utils/getRequest.js"
	import purchaseOperation from "@/components/purchase-operation.vue"
	import renovationRow from "@/components/renovation-row.vue"
	import  uParse from "@/components/u-parse/u-parse.vue"
	export default {
		components: {
			uParse,renovationRow,purchaseOperation
		},
		data() {
			return {
				id:null,
				source:0,
				offer:'',
				shopaid:0,
				type:null, // newHouseAcceptance  thirdPartySupervision
				bannerActive: 0,
				info: {
					carousel:[],
				},
				goodssku:[],
				tabActive:1,
				tabList:[
					{name:'详情',id:1},
					{name:'评价',id:2},
					{name:'推荐',id:3}
				],
				recommend:{
					loading:false,
					list:[],
					page:1,
					size:10,
					total:0
				},
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.info.name,
				imageUrl:this.info.carousel[0],
				path: `/pagesHome/information?id=${this.info.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`
			};
			
		},
		onShareTimeline(ops) {
		  return {
		  	title: this.info.name,
		  	imageUrl:this.info.carousel[0],
		  	path: `/pagesHome/information?id=${this.info.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`
		  }
		},
		onLoad(params) {
			this.type = params.type
			if(params.source) this.source = params.source
			if(params.offer) this.offer = params.offer
			// console.log(params,'传递信息啊');
			this.getInfo()
		},
		onReady(){
		},
		onReachBottom(){
			if(this.tabActive != 1 || this.recommend.page * this.recommend.size >= this.recommend.total) return
			this.recommend.page ++ 
			this.getRecommend()
		},
		methods: {
			onShare(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 5,
					miniProgram:{
						id:this.$global.originalId,
						path:`/pagesHome/information?id=${this.info.id}&type=${this.type}&invitation_code=${this.$store.state.userInfo ? this.$store.state.userInfo.invitation_code : ''}`,
						type:this.$global.environment == 'development' ? 2 : 0,
						webUrl:"https://www.baidu.com"
					},
				    title: this.info.name,
				    imageUrl:this.info.cover,
				    success: function (res) {
				       // uni.showToast({title:'分享成功',icon:'none'})
				    },
				    fail: function (err) {
						// console.log(JSON.stringify(err))
				    }
				});
			},
			async getRecommend(){
				this.recommend.loading = true
				try{
					var res = await getGuessYouLike({page:this.recommend.page,limit:this.recommend.size,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',type:2})
					this.recommend.list  =  this.recommend.page == 1 ? res.list : [...this.recommend.list,...res.list]
					this.recommend.total = res.count
					this.recommend.loading = false
				}catch{
					this.recommend.loading = false
				}
			},
			onBack() {
				let routes = getCurrentPages()
				if (routes.length == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			onChangeTab(id){
				this.tabActive = id
			},
			async getInfo() {
				uni.showLoading()
				var params = {id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '' }
				try{
					// console.log(params,'传递信息');
					if(this.type == 'newHouseAcceptance'){
					 var res = await getNewHouse(params)
					}else{
					 var res = await getSupervisor(params)
					}
					console.log(res,'商品信息');
					if(!res.sku){
						this.goodssku = 1;
					}
					
					
					this.info = res
					uni.hideLoading()
					await this.getRecommend()
					
				}catch{
					this.getRecommend()
					uni.hideLoading()
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page{
		min-height: 80vh;
		background-color: #f6f7fb;
		padding-bottom: 140rpx;
	}
	.left_icon{
		position: fixed;
		background-color: rgba(0,0,0,0.4);
		z-index: 99;
		top: 60px;
		left: 15rpx;
		width: 60rpx!important;
		height: 60rpx!important;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tabber{
		transition: all 0.8s;
	}
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text-align: center;
		color: #000;
		.left {
			position: absolute;
			left: 14rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.cover{
		width: 100%;
		height: 500rpx;
	}
	
	.info_box{
		background-color: #fff;
		padding: 20rpx  0 20rpx 32rpx;
		width: 100%;
		box-sizing: border-box;
		.top{
			padding-right: 32rpx;
			width: 100%;
			box-sizing: border-box;
			>text:nth-child(1),
			>text:nth-child(2){
				font-weight: 700;
				font-size: 44rpx;
				line-height: 60rpx;
				color:#FF0000;
			}
			>text:nth-child(2){
				margin-left: 5rpx;
			}
			>text:nth-child(3){
				margin-left: 16rpx;
				font-size: 28rpx;
				line-height: 60rpx;
				color:#FF0000;
			}
		}
		.bottom{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			.left{
				width: calc(100% - 142rpx);
				font-size: 28rpx;
				line-height: 40rpx;
				color:#26252A;
				font-weight: 700;
			}
			.right{
				width: 112rpx;
				height: 46rpx;
				background-color: #f6f7fb;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 32rpx 0 0 32rpx;
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
				text{
					color:#ADADAD;
					font-size: 24rpx;
				}
			}
			button::after {
				border: 0;
				width: 100%;
				text-align: center;
			}
			
			button {
				display: flex;
				justify-content: center;
				align-item: center;
				padding: 0;
			}
		}
	}
	.tab_box{
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:62rpx 48rpx;
		box-sizing: border-box;
		width: 100%;
		.row{
			flex:1;
			position: relative;
			font-size: 32rpx;
			line-height: 44rpx;
			color:#26252A;
			&:nth-child(1){
				text-align: left;
			}
			&:nth-child(2){
				text-align: center;
			}
			&:nth-child(3){
				text-align: right;
			}
			
		}
		.active{
			color:$theme;
			&::before{
				position: absolute;
				bottom: -14rpx;
				content:'';
				width: 56rpx;
				height: 8rpx;
				background: $theme;
			}
		}
	}
	.info_content{
		width: 100%;
		background-color: #fff;
		min-height:200rpx;
		.parse{
			padding: 0 36rpx;
			width: 100%;
			box-sizing: border-box;
		}
	}
	.info_list{
		padding: 150rpx 36rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			align-items: center;
			text:nth-child(2){
				font-size: 28rpx;
				line-height: 40rpx;
				color:#A4A4A4;
				margin: 0 20rpx;
			}
			text:nth-child(1),
			text:nth-child(3){
				width: calc(50% - 4em);
				background-color: #b9b9b9;
				height: 2rpx;
			}
		}
	}
	.button_box{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		padding: 36rpx 30rpx 20rpx 36rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		.btn{
			background-color: $theme;
			color:#fff;
			font-size: 26rpx;
			border-radius: 30rpx;
			height: 70rpx;
			width: 100%;
			text-align: center;
			line-height: 70rpx;
		}
	}
</style>
